Revamped and Enhanced the Home Screen Experience

Project Overview

The project focused on redesigning the home screens of FlexSalary and FlexPay apps to deliver a cleaner, modern, and more intuitive user experience. It also demonstrates my design approach and the valuable insights I gained during the redesign process.

Business Problem

Though the features and functionality of both apps were the same, the design and elements lacked consistency.
The existing UI felt outdated and cluttered, reducing engagement and trust.
Users struggled with insufficient information and poor visual hierarchy.
The design did not effectively reflect the changes in features.

“The existing home screens were outdated and inconsistent, failing to reflect new feature updates and resulting in a fragmented user experience."

Aim of the Project

Redesign the home screens to reflect updated features.
Create a consistent and unified design language across both platforms.
Ensure the design is accessible and responsive for both mobile and web users.
Simplify navigation and highlight critical loan/product details clearly.

Empathizing & Understanding User Behavior

This stage involved observing how users interacted with the existing home screens and identifying major friction points in navigation, trust and clarity.

Poor design failed to engage or guide users effectively.
Sluggish performance frustrated users and reduced usability.
Missing or unclear loan details left users confused and disengaged.
Lack of visual and functional consistency leading to poor user trust on product.

Designing & Testing

1st Version

The redesign was initiated to incorporate Instalment Loans (ILs) alongside the existing Line of Credit (LOC).
Required a fresh look while maintaining design consistency in colors, iconography, and typography.
Established a stronger visual hierarchy and ensured both LOC and ILs had a similar look and feel for clarity.

HomeScreen Version 1 For Both IL & LOC

A/B Testing & Iteration

A/B testing (also called split testing) is comparing two versions of a designs to figure out the better performing variation.

Created multiple design variations with different layouts, colors, and copy.
Focused on delivering a design that was both user-friendly and customizable.
Collected feedback from stakeholders covering design and business perspectives.
Iterated the designs to align user needs, business goals, and compliance requirements.
Ensured the final version achieved a balance of clarity, consistency, and scalability.

Loan Card Versions

2nd Version

Triggered by the compliance-driven removal of LOCs, converting the product entirely to ILs.
Created a fully customizable and intuitive layout to support scalability.
Ensured all products follow the same design system, making future enhancements easier.
Addressed functional concerns: reducing home screen length for multiple loans and minimizing clicks for repayments.

Home Screen Version 2

Final Approach & Deliverables

Adopted a user-centered design approach that prioritized clarity, accessibility and trust.
Established a consistent design system with unified typography, color palette, iconography, and hierarchy across products.
Optimized the design for both mobile and web platforms, ensuring adaptability and responsiveness.
Delivered interactive prototypes to demonstrate workflows and enhance stakeholder understanding.
Designed with future scalability in mind, making it easier to tweak, add, or remove features as products evolve.
Aligned the final design with WCAG accessibility standards, improving inclusivity.

My Learnings

Strengthened skills in user research, prototypes, and wireframes.
Improved visual hierarchy and brand identity alignment.
Gained confidence in balancing user needs with business goals.
Learned to iterate effectively through A/B testing and feedback loops.